<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!--头部功能栏  -->
        <el-form
          :inline="true"
          :model="pageParams"
          class="demo-form-inline"
        >
          <el-form-item label="标签名称">
            <el-input
              v-model="pageParams.tagName"
              placeholder="标签名称"
            ></el-input>
          </el-form-item>

          <el-form-item label="状态">
            <el-select
              v-model="pageParams.state"
              placeholder="请选择"
            >
              <el-option
                label="启用"
                value="0"
              ></el-option>
              <el-option
                label="禁用"
                value="1"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button @click="onClear">清除</el-button>
            <el-button
              type="primary"
              @click="onSearch"
            >搜索</el-button>
          </el-form-item>

          <template>
            <el-form-item class="right">
              <el-button
                type="success"
                icon="el-icon-edit"
                @click="newAdd"
              >新增标签</el-button>
            </el-form-item>
          </template>
        </el-form>

        <!-- 提示标签 -->
        <el-form class="tips">
          <el-alert
            :title="tips"
            type="info"
            show-icon
            :closable="false"
          >
          </el-alert>
        </el-form>

        <!--  数据主体-->
        <el-table
          :data="dataList"
          border
          style="width: 100%"
        >
          <el-table-column
            align="center"
            label="序号"
            width="100"
          >
            <template slot-scope="scope">
              <div>
                {{
                  pageParams.pagesize * (pageParams.page - 1) + scope.$index + 1
                }}
              </div>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            prop="subjectName"
            label="所属学科"
            width="100"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="tagName"
            label="标签名称"
            width="100"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="username"
            label="创建者"
            width="100"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="addDate"
            label="创建日期"
          >
            <template slot-scope="scope">
              {{ time(scope.row.addDate) }}
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="状态"
            width="100"
          >
            <template slot-scope="scope">
              <!-- <span>{{ scope.row.state ? "启用" : "禁用" }}</span> -->
              <span v-if="scope.row.state === 1">禁用</span>
              <span v-else-if="scope.row.state === 0">启用</span>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            prop="operation"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="zhaungtai(scope.row.state, scope.row.id)"
              >{{ scope.row.state ? "启用" : "禁用" }}</el-button>
              <!-- <el-button type="text" v-else-if="scope.row.state===0" @click="zhaungtai(scope.row.state,scope.row.id)">禁用</el-button> -->
              <el-button
                type="text"
                @click="doUpdate(scope.row)"
                :disabled="scope.row.state === 1 ? true : false"
              >修改</el-button>
              <el-button
                type="text"
                @click="hDel(scope.row.id)"
                :disabled="scope.row.state === 1 ? true : false"
              >
                删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 底部分页 -->
        <div style="overflow: hidden; margin-top:20px">
          <el-pagination
            class="right"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageParams.page"
            :page-size="pageParams.pagesize"
            layout="prev,pager,next,sizes,total,jumper"
            :total="total"
            :page-sizes="[2, 5, 10, 20]"
          >
          </el-pagination>
        </div>
        <!-- 弹窗 -->
        <el-dialog
          :title="isEdit ? '修改目录' : '新增目录'"
          :before-close="handleClose"
          :close-on-click-modal="false"
          :visible.sync="dialogVisible"
          width="30%"
        >
          <TagAdd
            v-if="dialogVisible"
            @add="hAdd"
            @close="close"
            :isEdit="isEdit"
            :formData="formData"
            class="middle"
          ></TagAdd>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, remove, changeState } from '@/api/hmmm/tags'
import { status } from '@/api/hmmm/constants'
import TagAdd from '../components/tags-add'
import moment from 'moment'
// console.log('状态码', status)

export default {
  components: {
    TagAdd
  },
  data () {
    return {
      pageParams: {
        page: 1,
        pagesize: 10, // 每页数据xx条
        subjectID: this.subjectID,
        tagName: this.tagName,
        state: this.state,
        directoryName: this.directoryName,
        addDate: '',
        id: ''
      },
      formData: {},
      total: 0,
      dialogVisible: false, // 弹窗
      isEdit: false,
      formInline: {
        user: '',
        region: ''
      },
      //   数据主体
      dataList: []
    }
  },
  computed: {
    state () {
      return status
    },
    tips () {
      return `共${this.total}条数据`
    }
  },

  created () {
    this.loadTagsList()
  },

  methods: {
    // 加载信息
    async loadTagsList (params) {
      console.log('params', params)
      const data = {
        page: this.pageParams.page,
        pagesize: this.pageParams.pagesize
      }
      try {
        // console.log('哈哈', this.pageParams.addDate)
        const res = await list({ ...data, ...params })
        this.dataList = res.data.items
        this.total = res.data.counts

        // console.log('dataList', this.addDate)
      } catch (err) {
        console.log(err)
      }
    },

    // 删除
    async doDel (id) {
      try {
        const res = await remove({ id })
        console.log(res)
        if (this.dataList.length === 1) {
          this.pageParams.page--
          if (this.pageParams.page <= 0) {
            this.pageParams.page = 1
          }
        }
        this.$message.success('删除成功')
        this.loadTagsList()
        // this.pageParams.page = 1
      } catch (err) {
        this.$message.error('删除失败')
      }
    },
    hDel (id) {
      console.log(id)
      this.$confirm('您确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.doDel(id)
        })
        .catch(() => { })
    },
    // 修改
    doUpdate ({ id, subjectID, tagName }) {
      this.formData = { id, subjectID, tagName }
      //   console.log('真的id', id)
      this.dialogVisible = true
      this.isEdit = true
    },

    // 搜索
    onSearch () {
      this.pageParams.page = 1
      this.loadTagsList(this.pageParams)
      //   console.log('用户', this.formInline.user, this.formInline.region)
    },
    // 清除
    onClear () {
      this.pageParams.state = ''
      this.pageParams.tagName = ''
      this.loadTagsList()
    },
    onSubmit () {
      this.dialogVisible = false
    },

    // 分页组件
    handleSizeChange (val) {
      this.pageParams.pagesize = val
      //   console.log(`每页 ${val} 条`)
      this.loadTagsList()
    },
    handleCurrentChange (val) {
      this.pageParams.page = val
      //   console.log(`当前页: ${val}`)
      this.loadTagsList()
    },

    close () {
      this.dialogVisible = false
      this.loadTagsList()
    },

    // 关闭弹窗
    handleClose () {
      this.dialogVisible = false
    },
    hAdd () {
      this.dialogVisible = false
      this.loadTagsList()
    },
    // 新增目录
    newAdd () {
      this.dialogVisible = true
      this.isEdit = false
    },
    // 状态
    async zhaungtai (state, id) {
      //   console.log('哈哈', state)
      if (state === 0) {
        state = 1
        console.log('哈哈0')
      } else {
        state = 0
        console.log('呵呵1')
      }
      const res = await changeState({ id, state })
      if (res.data.success) {
        this.$message.success('操作成功')
        this.loadTagsList()
        console.log('wowowowowo', res)
      }
    },
    time (val) {
      return moment(val).format('YYYY-MM-DD hh:mm:ss')
    }
  }
}
</script>

<style scoped >
.tips {
  margin-bottom: 10px;
}
.right {
  float: right;
  /* margin-top: 10px; */
}
.middle {
  text-align: center;
}
</style>
